<template>
    <div class="quescontent">
        <div class="questionbar" v-for="(item, index) in allquestion" :key="index">
            <!-- {{item}} -->
            <div v-for="(childitem, childindex) in item" :key="String(childitem)+ childindex" class="subbar">
              <!--{{(String(questionindex).length===5)?String(questionindex++).slice(3):String(questionindex++).slice(2)}}、-->
              <h4 class="qustitle">{{childitem}}</h4>
              <ul class="choicebox f-clear" :class="'a'+ childindex">
                  <li v-for="(childaswitem, childvalindex) in allanswer[index]" :key="childvalindex">
                    <input type="radio" class="u-radio" :name="String(childitem)+ childindex" :value="childvalindex" @click="inputval(childvalindex)">

                    <span>{{childvalindex == 0?"A":childvalindex==1?"B":childvalindex==2?"C":childvalindex==3?"D":childvalindex==4?"E":"F"}}</span>

                    {{childaswitem}}
                  </li>
              </ul>
            </div>

        </div>
    </div>
</template>

<script>
import urls from '../../common.js'
export default {
  name: 'questionlist',
  data () {
    return {
      questionlist: [],
      answerlist: [],
      allquestion: [],
      allanswer: [],
      isCheck: true,
      // numlist: ['A', 'B', 'C', 'D']
      nowIndex: '',
      actived: '',
      questionindex: 1
    }
  },
  mounted () {
    var _this = this
    _this.$http.get(urls.getQuestion).then(result => {
      var questionjson = JSON.parse(result.body.data.content)
      if (result.body.code === '200') {
        for (var key in questionjson) {
          console.log(key)
          if (String(key).indexOf('question') >= 0) {
            _this.allquestion.push(questionjson[key])
          } else if (String(key).indexOf('answer') >= 0) {
            _this.allanswer.push(questionjson[key])
          }
        }
        console.log(_this.allquestion)
        console.log(_this.allanswer)
      }
      // var arr = []
    })
  },
  methods: {
    inputval: function (valindex) {
      // this.nowIndex = valindex
      // console.log(valindex)
      this.$emit('answclick', valindex)
      // var _this = this
      // for (var i = 0; i < _this.answerlist.length; i++) {
      //   var va = $("input[type='radio']:checked")
      //   if (va) {
      //     console.log(va.val())
      //   }
      // }
    }
  }
}
</script>

<style lang="stylus" scoped>
    .quescontent
        .questionbar
            .subbar
              margin-bottom:0.3rem;
            .qustitle
              font-size: 0.26rem;
              color: #292d33;
              margin-bottom: 0.22rem;
              position: relative;
              padding-left: 0.3rem;
              &:before
                content:'';
                width:0.13rem;
                height: 0.13rem;
                background: #46b1a4;
                border-radius:50%;
                position: absolute;
                left: 0;
                top: 0.06rem;
            .choicebox
              padding: 0 0.2rem 0 0.44rem;
              li
                font-size: 0.24rem;
                color: #292d33;
                float: left;
                margin-right: 0.65rem;
                .u-radio
                  width: 0.36rem;
                  height: 0.36rem;
                  -webkit-appearance: none;
                  background-image: url('../../../static/images/satisfaction/checkbox.png');
                  background-repeat: no-repeat;
                  background-size: 100% 100%;
                  margin-right: 0.2rem;
                  &:checked
                    background-image: url('../../../static/images/satisfaction/checkboxsel.png');
</style>
